<template>
    <div style="margin-top: 108px; margin-left: auto; margin-right: 10px; width: 50vw;padding: 100px;">
        <button id="button" aria-describedby="tooltip" @click="smartTitle.display">I'm a button</button>
        <button id="button" aria-describedby="tooltip" @click="smartTitle.display">I'm a button</button>
        <button id="button" aria-describedby="tooltip" @click="smartTitle.display">I'm a button</button>


        <div class="text-overflow-ellipsis" style="width: 100px;"
             @mouseleave="smartTitle.hidden" @mouseenter="smartTitle.display">
            一二三四五六七八九十零
            一二三四五六七八九十零
            一二三四五六七八九十零
            一二三四五六七八九十零
        </div>

        <div class="text-overflow-ellipsis" style="width: 100px;"
             @mouseleave="smartTitle.hidden" @mouseenter="smartTitle.display">
            一二三四五六七八九十零
            一二三四五六七八九十零
            一二三四五六七八九十零
            一二三四五六七八九十零
        </div>

        <div class="text-overflow-ellipsis" style="width: 100px;"
             @mouseleave="smartTitle.hidden" @mouseenter="smartTitle.display">
            一二三四五六七八九十零
            一二三四五六七八九十零
            一二三四五六七八九十零
            一二三四五六七八九十零
        </div>
    </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {smartTitle} from "@/widget/use/use-floating";

onMounted(() => {
})

</script>

<style lang="scss">

</style>